<template>
  <div class="home">
    <p class="title" @dblclick="open">服务记录</p>
    <div class="table-box">
      <a-table :dataSource="tableData.data" :columns="tableHead" :pagination="false"
        :scroll="{  y: 645 }" :loading="loading">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'isOffend'">
            <span>{{ record.isOffend?'是':'否' }}</span>
          </template>
          <template v-if="column.key === 'action'">
            <a @click="detail(record)">详情</a>
          </template>
        </template>
      </a-table>
      <div class="page-box">
        <a-pagination v-model:current="currentPage" :total="total" @change="changePage"/>
      </div>
    </div>
  </div>
</template>

<script setup>


import {reactive,ref,watch} from 'vue'
import axios from 'axios';
import { useRouter } from "vue-router";
import { message } from 'ant-design-vue';
import { useStore } from '../stores/index'
const store = useStore()
const router = useRouter()
let loading = ref(false)

let tableData = reactive({
  data:[]
})

const tableHead = reactive([
  {
    title: '手机号',
    dataIndex: 'customerPhone',
    key: 'customerPhone',
    width:120
  },
  {
    title: '客户姓名',
    dataIndex: 'customerName',
    key: 'customerName',
    width:100
  },
  {
    title: '服务类型',
    dataIndex: 'serveType',
    key: 'serveType',
    width:100
  },
  {
    title: '节点',
    dataIndex: 'phaseIdentify',
    key: 'phaseIdentify',
    width:120
  },
  {
    title: '服务员工',
    dataIndex: 'staffName',
    key: 'staffName',
    width:120
  },
  {
    title: '所属门店',
    dataIndex: 'storeName',
    key: 'storeName',
    width:120
  },
  {
    title: '服务时间',
    dataIndex: 'serveTime',
    key: 'serveTime',
    width:120
  },
  {
    title: '服务时长',
    dataIndex: 'serveSeconds',
    key: 'serveSeconds',
    width:100
  },
  {
    title: '是否违规',
    dataIndex: 'isOffend',
    key: 'isOffend',
    width:80
  },
  {
    title: '服务质量',
    dataIndex: 'serveQuality',
    key: 'serveQuality',
    width:80
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width:60
  },

])


let currentPage = ref(1);
let total = ref(0);
let listData=()=>{
  loading.value=true;
  axios.post('http://43.139.30.253:38005/v1/serve/list', {
    area: [],
    isOffend: null,
    page: currentPage.value,
    size:10
  }, {
    headers: {
      'Content-Type':'application/json',
      'Authorization':store.token
    }
  }).then(res=>{
    loading.value=false;
    console.log('返回信息',res.data);
    if(res.data.code){
      message.info(res.data.message);
    }else{
      tableData.data=res.data.data;
      total.value=res.data.total;
    }
    
  })
}
listData();


const detail = (scope)=>{
  console.log('scope',scope)
  router.push(`/detail/${scope.id}`);
}


// 切换分页
const changePage = currentPage => {
  console.log('Page: ', currentPage.value);
  listData();
};

</script>

<style scoped>
  .title {
    font-size: 18px;
    font-weight: bold;
    margin:0 0 10px 0;
  }
  .table-box {
    border-radius:8px;
    overflow: hidden;
  }
  .page-box {
    margin-top: 16px;
    display:flex;
    flex-direction: row-reverse;
    width: 100%;
    background: #fff;
    padding: 16px;
    border-radius:8px;

  }
</style>